<template>
	<view class="wrap">
		<view class="fixed-top">
			<view class="acea-row row-middle row-between search-header">
				<image src="../../static/images/user/leftarrow.png" mode="aspectFill" @click="goback"></image>
				<view class="acea-row row-middle search-box">
					<view class="search-ipt">
						<text class="iconfont icon-xiazai5"></text>
						搜索订单
					</view>
				</view>
			</view>
			<tabNav :tabTitle="tabTitle" :tabNavOn="tabNavOn" @changeTab="changeTab"></tabNav>
		</view>
		<!-- 状态 -->
		<view class="status_tab acea-row row-between row-middle">
			<view :class="activeIndex==index?'red':'col_66'" v-for="(item,index) in status"
				@click="changeStatusTab(index)">{{item}}</view>
		</view>
		<!-- 类别 -->
		<view class="list">
			<view class="content" @click="toDetailPage">
					<view class="top acea-row row-between row-middle">
						<view class="left acea-row row-middle  ">
							<image src="../../static/images/user/enter.png" mode="aspectFill"></image>
							<text class="enter_limit">182****1234</text>
						</view>
						<view class="right red">待付款</view>
					</view>
					<view class="bottom acea-row row-between row-middle">
						
						<image src="../../static/images/gift.png" mode=""></image>
						<view class="contents">
							<view class="line acea-row">
								<text class="limit">公司类型： 长沙成城银山房地产开发有限公司</text>
								<text class="equie col_80">x1</text>
							</view>
							<view class="line col_80">
								10套
							</view>
							<view class="line">
								<text class="font30 red mr10">10000金币</text><text class="font22 col_80 linethrough">¥1169.9</text>
							</view>
						</view>
					</view>
					<view class="line_bottom">实付: <text class="font30 red price">10000金币</text></view>
					<view class="btns acea-row row-right">
						<view class="btn">
							申请服务商
						</view>
						<view class="btn red">
							联系卖家
						</view>
						<view class="btn pay">
							立即付款
						</view>
					</view>
			</view>
	    </view>
	</view>
	</view>
</template>

<script>
	import tabNav from "@/components/tabNav";
	export default {
		components: {
			tabNav
		},
		data() {
			return {
				tabNavOn: 0,
				tabTitle: [{
					cate_name: '全部'
				}, {
					cate_name: '商铺房屋'
				}, {
					cate_name: '二手'
				}, {
					cate_name: '供应链'
				}, {
					cate_name: '商家'
				}, {
					cate_name: '金币商城'
				}],
				status: ['全部', '待付款', '待发货', '待收货', '退款中'],
				activeIndex: 0
			}
		},
		methods: {
			changeStatusTab(idx) {
				this.activeIndex = idx;
			},
			changeTab(e) {
				if (e.type == 'big') {
					this.tabNavOn = e.index
				}
			},
			goback() {
				return uni.navigateBack({
					delta: 1
				});
			},
			onReachBottom() {}
		},
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 200rpx 0 50rpx;
	}
	.linethrough {
		text-decoration: line-through;
	}
	.mr10 {
		margin-right: 10rpx;
	}
	.col_38 {
		color: #383838;
	}

	.col_A6 {
		color: #A6A6A6;
	}
    .col_80 {
		color: #808080;
	}
	.col_66 {
		color: #666666;
	}

	.mt_28 {
		margin-top: 28rpx;
	}
    .font22 {font-size: 22rpx;}
    .font24 {font-size: 24rpx;}
    .font26 {font-size: 26rpx;}
    .font30 {font-size: 30rpx;}
	.red {
		color: #EE212D;
	}

	.text_c {
		text-align: center;
	}

	.sys-head {
		width: 100%;
		background: #EE212D;
	}

	.fixed-top {
		width: 100%;
		background: #EE212D;
		position: fixed;
		top: 0;
		left: 0;
		height: 202rpx;
		z-index: 999;
	}

	.search-header {
		width: 100%;
		padding: 26rpx;
		background: #EE212D;

		image {
			width: 28rpx;
			height: 32rpx;
			margin-right: 34rpx;
		}

		.search-map {
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;

			image {
				width: 40rpx;
				height: 36rpx;
			}
		}
	}

	.search-box {
		// width: 586rpx;
		flex: 1;
		height: 70rpx;
		opacity: 1;
		border-radius: 36rpx;
		background: rgba(255, 255, 255, 1);
		padding: 12rpx 32rpx;

		.search-ipt {
			color: rgba(166, 166, 166, 1);

			text {
				padding: 0 16rpx 0 0rpx;
			}
		}
	}

	.status_tab {
		margin: 10rpx 46rpx 0;
		height: 90rpx;
	}

	.list {
		margin: 0rpx 28rpx 0;
	}

	.content {
		padding: 30rpx 26rpx;
		margin-top: 32rpx;
		background-color: #fff;
		border-radius: 10rpx;
        &:first-child {
			margin-top: 0;
		}
		.top {
			height: 56rpx;
			padding-bottom: 14rpx;
			border-bottom: 2rpx solid #EEEEEE;

			.left {
				image {
					width: 42rpx;
					height: 42rpx;
					border-radius: 21rpx;
					margin-right: 12rpx;
				}
			}

			.right {
				font-size: 24rpx;
				color: #808080;
			}
		}

		.bottom {
			position: relative;
			margin: 16rpx 0;

			image {
				height: 132rpx;
				width: 132rpx;
				margin-right: 14rpx;
			}

			.contents {
				flex: 1;
				color: #808080;
			}

			.line {
				word-break: break-all;
				line-height: 44rpx;
				font-size: 24rpx;
				color: #333333;
			}

			.equie {
				right: 0;
				top: 4rpx;
				font-size: 24rpx;
			}

			.limit {
				flex: 1;
				margin-right: 10rpx
			}
		}
	}

	.area {
		margin: 16rpx 0 32rpx;
		background-color: #F7F7F7;
		height: 144rpx;
		border-radius: 4rpx;
		box-sizing: border-box;
		padding: 16rpx 0;
	}

	.line_bottom {
		padding: 0 0 24rpx;
		border-bottom: 3rpx solid #EEEEEE;
		margin: 22rpx 0 30rpx;
		text-align: right;
	}

	.btn {
		// width: 100rpx;
		padding: 0 20rpx;
		height: 58rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		color: #808080;
		box-sizing: border-box;
		text-align: center;
		border-radius: 4px;
		border: 2rpx solid #E5E5E5;

		&:not(:last-child) {
			margin-right: 24rpx;
		}
		&.red {
			color: #EE212D;
			border: 2rpx solid #EE212D;
		}
		&.pay {
			color: #fff;
			background-color: #EE212D;
			border: 2rpx solid #EE212D;
		}
	}
    .price {
		font-weight: 500;
		margin-left: 8rpx
	}
	.publish_btn {
		position: fixed;
		left: 50%;
		transform: translateX(-199rpx);
		bottom: 48rpx;
		background-color: #EE212D;
		color: #fff;
		width: 398rpx;
		height: 98rpx;
		line-height: 98rpx;
		color: #fff;
		text-align: center;
		box-shadow: 0px 3px 8px 0px #F50F1E;
		border-radius: 100rpx;
		z-index: 999
	}

	.enter_limit {
		word-break: break-all;
		max-width: 380rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
